import { broadcastEmitter } from "@/utils/eventbus"
import { getObjectStorage } from "@/utils/storage"
import { mobile } from "@/utils/tools"
import { useMouseType } from "@/hooks"

const maxSize = 20
const minSize = 16

export const fontInfo = { fojiya: true, monospace: false, Consolas: false, font: false, font2: false }

export const changeTheme = (lightTheme) => {
    broadcastEmitter("darkMode", lightTheme)
    darkMode(lightTheme)
}

const darkMode = (lightTheme) => {
    if (lightTheme) {
        document.documentElement.classList.remove("dark")
    } else {
        document.documentElement.classList.add("dark")
    }
}

const mobileMode = () => {
    document.documentElement.classList.add("mobile")
    document.documentElement.style.setProperty("--font-size", "12px")
}

export let config = $ref({
    fontFamily: "font2",
    fontSize: minSize,
    background: "",
    lightTheme: true,
    glass: true,
    showTagMenu: true,
    showHeader: true,
    showElRipple: true,
    showMouseRipple: true,
    mouseType: true,
    showPaoPao: false
})

export const decrease = () => {
    if (config.fontSize > minSize) {
        config.fontSize -= 1
        handleChange()
    }
}

export const increase = () => {
    if (config.fontSize < maxSize) {
        config.fontSize += 1
        handleChange()
    }
}

export const changeTagMenuShow = (show) => {
    show ? document.documentElement.classList.add("withTagMenu") : document.documentElement.classList.remove("withTagMenu")
}

useMouseType(() => { return { showMouse: config.mouseType, showPaoPao: config.showPaoPao } })

export const changeHeaderShow = (show) => {
    show ? document.documentElement.classList.add("withHeader") : document.documentElement.classList.remove("withHeader")
}

export const fontFamilyChange = (value) => {
    document.documentElement.style.setProperty("--font-family", value || "font2, cursive, monospace")
    document.documentElement.style.setProperty("--font-weight", fontInfo[value] ? 'bold' : '')
}

let timeout = $ref(null)
const handleChange = () => {
    if (config.fontSize >= minSize && config.fontSize <= maxSize) {
        clearTimeout(timeout)
        const tagMenuEle = document.querySelector(".tag_view")
        tagMenuEle.classList.add("no-transition")
        timeout = setTimeout(() => {
            tagMenuEle.classList.remove("no-transition")
        }, 50)
        document.documentElement.style.setProperty("--font-size", config.fontSize + "px")
    }
}

export const changeGlass = (glass) => {
    glass ? document.documentElement.classList.add("glass") : document.documentElement.classList.remove("glass")
    document.documentElement.style.setProperty("--overlay-background-filter-blur", glass ? 'var(--overlay-glass-background-filter-blur)' : 'var(--overlay-not-glass-background-filter-blur)')
    document.documentElement.style.setProperty("--overlay-background-color", glass ? 'var(--overlay-glass-background-color)' : 'var(--overlay-not-glass-background-color)')
    document.documentElement.style.setProperty("--element-background", glass ? 'var(--element-glass-background)' : 'var(--element-not-glass-background)')
}

export const setPageStyle = () => {
    const storage = getObjectStorage("config", config)
    config = storage.value
    handleChange()
    fontFamilyChange(config.fontFamily)
    darkMode(config.lightTheme)
    changeGlass(config.glass)
    if (mobile) mobileMode()
    changeTagMenuShow(config.showTagMenu)
    changeHeaderShow(config.showHeader)
}

const calcTableWidth = (size) => {
    return computed(() => config.fontSize * size)
}

export const fontAutoResize = {
    size_20: calcTableWidth(20),
    size_19: calcTableWidth(19),
    size_18: calcTableWidth(18),
    size_15: calcTableWidth(15),
    size_13: calcTableWidth(13),
    size_12: calcTableWidth(12),
    size_11: calcTableWidth(11),
    size_10: calcTableWidth(10),
    size_9: calcTableWidth(9),
    size_8: calcTableWidth(8),
    size_7: calcTableWidth(7),
    size_6: calcTableWidth(6),
    size_5: calcTableWidth(5),
    size_4: calcTableWidth(4),
    size_3: calcTableWidth(3),
    size_2: calcTableWidth(2),
    size_1: calcTableWidth(1)
}
